<template>
    <div>

        <div style="background-color: #5ba2f4;width: 100%;height: 3rem;">
            <myHeaderVue style="background-color: #5ba2f4; color: aliceblue;">
                <template #left>
                    <img src="../../../public/img/白左箭头.svg" style="width: 20%;height: 100%;" alt=""
                        @click="$router.go(-1)">
                </template>
                <template #center>讲师详情</template>
            </myHeaderVue>
            <div style="width: 96%;margin:.4rem auto;background-color: #fff;height: 2.7rem;border-radius: .16rem;"
                class="box">
                <div>
                    <img :src="list.teacher_avatar" alt="">
                    {{list.teacher_name}}
                    {{list.introduction}}
                </div>
                <div class="guanzhu" @click="guan(list.teacher_id)">
                    关注
                </div>
            </div>
            <myTab :tabList="tabList"></myTab>
        </div>
    </div>
</template>

<script>
import myHeaderVue from '@/components/myHeader.vue';
import myTab from '@/components/myTab.vue'
import { collect, getTearchDetail } from '@/http/api'
export default {
    components: {
        myHeaderVue,
        myTab
    },
    data() {
        return {
            list: JSON.parse(this.$route.query.obj),
            tabList: [{ name: '讲师介绍' }, { name: '主讲课程' }, { name: '学员评价' }]
        }
    },
    methods: {
        guan(val) {

        }
    },
    created() {
        console.log(this.list);
        collect(this.list.teacher_id).then(res => {

        })
        getTearchDetail(this.list.teacher_id).then(res => {

        })
    }
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
        vertical-align: middle;
    }
}

.guanzhu {
    width: 1.8rem;
    height: 0.8rem;
    background-color: #ebeefe;
    margin: 0 .8rem;
    text-align: center;
    line-height: .8rem;
    font-size: .3rem;
    color: #eb8744;
    border-radius: .4rem;
}
</style>